<template>

  <el-main>
<!--    <div class="text-title">-->
<!--      <div class="title">让我们开始调查</div>-->
<!--      <div class="description">——在问卷星球的帮助下开始调查</div>-->
<!--      <el-button class="startBtn" @click="start">开始调查</el-button>-->
<!--      <h1 class="quote">Let Stars Light Your Survey</h1>-->
<!--    </div>-->
      <div>
        <transition name="el-fade-in-linear">
          <div class="text-title" v-show="show">
            <div class="title">让我们开始调查</div>
            <div class="description">——在问卷星球的帮助下开始调查</div>
            <el-button class="startBtn" @click="start">开始调查</el-button>
            <h1 class="quote">Let Stars Light Your Survey</h1>
          </div>
        </transition>
      </div>

  </el-main>
</template>

<script>
export default {
  name: "HomeMainContent",
  data () {
    return {
      show: false
    }
  },
  mounted() {
    this.timer = setTimeout(()=>{   //设置延迟执行
      console.log('ok');
      this.show = true
    },500)
  },
  methods: {
    start() {
      console.log('start');
      if (localStorage.getItem('id') !== null) {
        const { href } = this.$router.resolve({
          path: '/qamanage',
        });
        window.open(href,'_self')
      }
      else {
        const { href } = this.$router.resolve({
          path: '/login',
        });
        window.open(href,'_self')
      }
    },
  }
}
</script>

<style scoped>
  .el-main {
    color: #333;
    text-align: center;
    position: fixed;
    width: 100%;
    height: 100%;

    background-image: url("../../../src/img/home/HomeMain.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .text-title {
    color: rgba(255, 255, 255, 0.97);
  }

  .title {
    font-size: 60px;
    margin-top: 100px;
  }

  .description {
    font-size: 30px;
    margin-top: 50px;
    margin-left: 400px;
  }

  .startBtn {
    background-color: transparent;
    color: white;
    margin-top: 200px;
  }

  .quote {
    font-family: Zapfino;
    margin-top: 150px;
  }

  .transition-box {
    margin-bottom: 10px;
    width: 300px;
    height: 100px;
    border-radius: 4px;
    background-color: #42B983;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-left: 520px;
  }
</style>

